<!-- 我账号的id
361542888 -->
<!-- NMTID=00O2wdU_DAuV38mMEGuuShKhN3kB-sAAAF4gclyIw -->
<template>
	<view>
		<!-- 头像、名称、vip的标、等级、箭头 -->
		<view class="head">
			<!-- 头像 -->
			<view class="head_portrait">
				<image class="portrait":src="head" mode=""></image>
			</view>
			<!-- 名称 -->
			<view class="head_name">
				<text class="text_1">{{head_name}}</text>
			    <image class="vip" src="../../static/vip.png" mode=""></image>
				<text class="text_2">Lv.{{level}}</text>
			</view>
			<!-- 箭头 -->
			<view class="head_arrow">
				<image class="jt" src="../../static/jiantou.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				head:'',
				head_name:'',
				level:''
			};
		},
		mounted() {
			this.myuser=uni.getStorageSync('setUser');
			this.gethead(this.myuser)
			this.getName(this.myuser)
			console.log(this.myuser)
		},
		methods:{
			// 获取头像
			gethead(myuser){
				uni.request({
					url:'http://localhost:3000/user/detail',
					data:{
						uid:myuser
					},
					method:'GET',
					success: (res) => {
						this.head = res.data.profile.avatarUrl
					}
					
				})
			},
			// 获取网名
			getName(myuser){
				uni.request({
					url:'http://localhost:3000/user/detail',
					data:{
						uid:myuser
					},
					method:'GET',
					success: (res) => {
						this.head_name = res.data.profile.nickname
						this.level = res .data.level
					}
					
				})
			},
			
		}
	}
</script>

<style lang="scss">
	//头像
  .head{
	  height: 150rpx;
	  margin-top:40rpx;
	  position: relative;
	  .portrait{
		  width:80rpx;
		  height:80rpx;
		  border-radius: 50%;
		  border:2px solid #fff;
		  position: absolute;
		  top:30rpx;
		  left:45rpx;
	  }
  }
  //网名
  .head_name>.text_1{
	  width:150rpx;
	  text-align: center;
	  position: absolute;
	  top:40rpx;
	  left:140rpx;
	  font-weight: 600;
	  letter-spacing: 3rpx;
  }
  //状态和等级
  .head_name>.text_2{
	  position: absolute;
	  top:86rpx;
	  left:220rpx;
	  background-color: #fbfdfd;
	  border-radius: 20rpx;
	  width:70rpx;
	  font-size: 10px;
	  text-align: center;
  }
  .vip{
	  width:60rpx;
	  height:60rpx;
	  position: absolute;
	  top:72rpx;
	  left:150rpx;
  }
  //箭头
  .jt{
	  width:50rpx;
	  height:50rpx;
	  position: absolute;
	  top:50rpx;
	  right:80rpx;
  }
</style>
